<template>
  <div class="b_main">
    <div class="m_container">
      <div class="m_left">
        <div class="m_infoPane">
          <info-pane :infoData = "InfoPaneData" :AchieveData="GroupAchievement"></info-pane>
        </div>
        <div class="m_groupInfo ">
          <group-info :giData = "groupInfoData"></group-info>
        </div>
        <div class="m_teamRank">
          <team-rank-list></team-rank-list>
        </div>
        <div class="clearfix"></div>
        <div class="m_monthRank rank_month">
          <!-- 2.0 需求  -->
          <group-rank></group-rank>
          <!-- <div class="m_monthRankCol rank_month_box"> 
            <rank-month :monthData="zuOne" :rankName = "registerName"></rank-month>
          </div>
          <div class="m_monthRankCol rank_month_box">
            <rank-month :monthData="zuTwo" :rankName = "loseName"></rank-month>
          </div>
          <div class="m_monthRankCol rank_month_box">
            <rank-month :monthData="zuThr" :rankName = "unregisteredName"></rank-month>
          </div> -->
        </div>
      </div>
      <!--/ m_left -->
      <div class="m_right el-aside">
        <h1>当月各组达成率</h1>
        <vitality-pool :groupType = "unregisterGroup" :targetPerc="unregisterCount"></vitality-pool>
        <vitality-pool :groupType = "loseGroup" :targetPerc="loseCount"></vitality-pool>
        <vitality-pool :groupType = "dialingGroup" :targetPerc="dialingCount"></vitality-pool>
        <vitality-pool :groupType = "newGroup" :targetPerc="newCount"></vitality-pool>
      </div>
      <!--/ m_right -->
    </div>
    <!--/ m_container -->
  </div>
  <!--/ b_main -->
</template>

<script>
import { fetchToken, fetchAchievementRate, fetchGroupAchievement, fetchRealtimeChampion, fetchRealtimeChartByMonth, fetchRealtimeMonthlyRankings } from '@tv/api/api';
import InfoPane from '@tv/views/pages/InfoPane';
import GroupInfo from '@tv/views/pages/GroupInfo';
import TeamRankList from '@tv/views/pages/TeamRankList';
import RankMonth from '@tv/views/pages/RankMonth';
import GroupRank from '@tv/views/pages/GroupRank';
import VitalityPool from '@tv/views/pages/VitalityPool';
import { clearInterval, setInterval } from 'timers';

export default {
  name: 'Index',
  components: {
    InfoPane,
    GroupInfo,
    TeamRankList,
    RankMonth,
    GroupRank,
    VitalityPool,
    token: ''
  },
  data () {
    return {
      InfoPaneData: {}, // 实时达成率
      GroupAchievement: [], // 各组达成情况
      groupInfoData: [],
      title: '今日实时达成率',
      registerName: '新注册用户组、综合拨打组当月排名',
      loseName: '流失用户组当月排名',
      unregisteredName: '未激活用户组当月排名',
      unregisterGroup: '业务C组',
      loseGroup: '业务B组',
      dialingGroup: '业务D组',
      newGroup: '业务A组',
      zuOne: [],
      zuTwo: [],
      zuThr: [],
      unregisterCount: 0,
      loseCount: 0,
      newCount: 0,
      dialingCount: 0
    };
  },
  created () {
    this.handlerToken();
  },
  methods: {
    handlerAchievementRate() {
      fetchAchievementRate().then(resp => {
        this.InfoPaneData = resp;
      });
    },
    handlerGroupAchievement() {
      fetchGroupAchievement().then(resg => {
        this.GroupAchievement = resg;
      });
    },
    handlerRealtimeChampion() {
      fetchRealtimeChampion().then(resr => {
        // 清空初始化 
        this.groupInfoData = [];
        // MaxCountCustomer 电话次数  MaxHightCustomer 达成率最高 MaxTimeCustomer 通话时间最长
        const mcc = (resr.MaxCountCustomer.length === 0 || resr.MaxCountCustomer === undefined) ? 0 : (resr.MaxCountCustomer)[0];
        // const mcc = [];
        const mhc = (resr.MaxHightCustomer.length === 0 || resr.MaxHightCustomer === undefined) ? 0 : (resr.MaxHightCustomer)[0];
        // const mhc= [];
        const mtc = (resr.MaxTimeCustomer.length === 0 || resr.MaxTimeCustomer === undefined) ? 0 : (resr.MaxTimeCustomer)[0];

        // 接口数据转换
        const whdr = mcc === 0 ? '' : {type: 1, gName: '外呼达人', user_avatar: mcc.HEADPHOTOURL, userName: mcc.USERNAME, userGroup: mcc.ZUNAME, userTargetName: '呼出电话数', userCount: mcc.THCS};
        const ywdh = mhc === 0 ? '' : {type: 2, gName: '业务大亨', user_avatar: mhc.HEADPHOTOURL, userName: mhc.USERNAME, userGroup: mhc.ZUNAME, userTargetName: '实时达成值', userCount: mhc.DCTZE,userTargetRate: '实时达成率', userTargetRateValue: mhc.MBDCL};
        const cpgj = mtc === 0 ? '' : {type: 1, gName: '长跑冠军', user_avatar: mtc.HEADPHOTOURL, userName: mtc.USERNAME, userGroup: mtc.ZUNAME, userTargetName: '通话时长', userCount: mtc.THSC};
        whdr === '' ? '' : this.groupInfoData.push(whdr);
        ywdh === '' ? '' : this.groupInfoData.push(ywdh);
        cpgj === '' ? '' : this.groupInfoData.push(cpgj);
      });
    },
    // 获取当月的排名
    // handlerRealtimeChartByMonth(params) {
      // fetchRealtimeChartByMonth(params).then(resm => {
        // let newAray = [];
        // if (params.zuid === 1) {this.zuOne = resm;}
        // if (params.zuid === 1) {
        //   newAray = resm
        //   fetchRealtimeChartByMonth({zuid: 4}).then(resp => {
        //     const newTempAry = [{DCTZE: null, EMPID: null, HEADPHOTOURL:null, KFID: null ,MBTZE: null,RATE: null,ROWNUM: 888888, USERNAME: '新注册用户组'}]
        //     const dialTempAry = [{DCTZE: null, EMPID: null, HEADPHOTOURL:null, KFID: null ,MBTZE: null,RATE: null,ROWNUM: 888888, USERNAME: '综合拨打组别'}]
        //     this.zuOne = newTempAry.concat(newAray).concat(dialTempAry).concat(resp)
        //   })
        // }
        // if (params.zuid === 2) {this.zuTwo = resm;}
        // if (params.zuid === 3) {this.zuThr = resm;}
      // });
    // },
    // 当月组的排名
    handlerRealtimeMonthlyRankings() {
      fetchRealtimeMonthlyRankings().then(resp => {
        resp.forEach(element => {
          if (element.ZUNAME.trim() === '业务A组') {
            this.newCount = element.RATE;
          } else if (element.ZUNAME.trim() === '业务B组') {
            this.loseCount = element.RATE;
          } else if (element.ZUNAME.trim() === '业务C组') {
            this.unregisterCount = element.RATE;
          } else if (element.ZUNAME.trim() === '业务D组') {
            this.dialingCount = element.RATE;
          } else {
            // TODO
          }
        });
      });
    },
    handlerToken () {
      fetchToken().then(res => {
        this.$store.commit('SET_USER_TOKEN', res);
        // 今日实时达成率 0.5h更新一次
        this.handlerAchievementRate();

        // 今日各组达成情况 0.5h更新一次
        this.handlerGroupAchievement();

        // 实时冠军排行榜 0.5H更新一次
        this.handlerRealtimeChampion();

        // 当月组的排名
        this.handlerRealtimeMonthlyRankings();

        //  0.1h更新一次
        let timeAR = null;
        clearInterval(timeAR);
        timeAR = setInterval(() => {
          const date = new Date();
          let minuteStr = date.getMinutes() + ':' + date.getSeconds();
          this.handlerAchievementRate();
          this.handlerGroupAchievement();
          this.handlerRealtimeChampion();
          this.handlerRealtimeMonthlyRankings();
        }, 60000);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .b_main{
    .m_container{
      padding: 0.2rem;
      width:19.2rem;
      height: auto;
      overflow: hidden;
      .m_left{
        margin-right: 0.3rem;
        float: left;
        width: 15.5rem;
        height: auto;
        .m_infoPane{
          margin-right: 0.3rem;
          float: left;
          width: 4.9rem;
          height: auto;
        }
        .m_groupInfo{
          float: left;
          width: 4.9rem;
          height: auto;
          overflow: hidden;
        }
        .m_teamRank{
          float: right;
          width: 5.1rem;
          height: auto;
          overflow: hidden;
        }
        .clearfix{
          clear: both;
        }
        .m_monthRank{
          width: 15.5rem;
          height: auto;
          overflow: hidden;
          .m_monthRankCol{
            float: left;
            width: 33.333333%;
          }
        }
        .rank_month{
          padding: 0.2rem;
          margin-top: 0.3rem;
          background: #191f28;
          .rank_month_box{
            padding-left: 0.27rem;
            border-right:  1px solid #0e131a;
            box-shadow: 1px 0 0 rgba(45,52,61,1);
            -webkit-box-shadow: 1px 0 0 rgba(45,52,61,1);
            -moz-box-shadow: 1px 0 0 rgba(45,52,61,1);
            &:first-child{
              padding-left: 0;
            }
            &:last-child{
              border-right: none;
              box-shadow: 1px 0 0 rgba(45,52,61,0);
              -webkit-box-shadow: 1px 0 0 rgba(45,52,61,0);
              -moz-box-shadow: 1px 0 0 rgba(45,52,61,0);
            }
          }
        }
      }
      .m_right{
        float: right;
        width: 2.82rem;
        height: auto;
      }
      .el-aside{
        overflow: hidden;
        background: #191f28;
        h1{
          padding: 0 0 0.1rem 0.22rem;
          width:100%;
          height: 0.6rem;
          font-size: 0.22rem;
          line-height: 0.6rem;
          color: #75787e;
        }
      }
    }
  }
</style>
